import React, { PureComponent,Fragment } from 'react';

import { PageHeader,LocaleProvider, Breadcrumb, Row, Col } from 'antd';

import MemoryRouter from 'react-router/MemoryRouter';

import zh_CN from 'antd/lib/locale-provider/zh_CN';

import { Route, Switch, withRouter } from 'react-router';
import { Link } from 'react-router-dom';

import UIIcon from './uicomponents/UIIcon';

class MainPageHeader extends PureComponent {
    
    breadcrumbItemRender = (route, params, routes, paths) => {
        const last = routes.indexOf(route) === routes.length - 1;
        return last ? <span> <UIIcon icon={route.icon} /> {route.breadcrumbName}</span> : route.useRouter ? <Link to="/">{route.breadcrumbName}</Link> : <a href={paths.join('/')}>{route.breadcrumbName}</a>;
      }

    render() {
        const { contentMap, currentModule, location } = this.props;
        const pathSnippets = location ? location.pathname.split('/').filter(i => i) : [];

        const extraBreadcrumbItems = pathSnippets.map((_, index) => {
            const url = `/${pathSnippets.slice(0, index + 1).join('/')}`;
            //console.log(url);
            return (
                {
                    useRouter: true,
                    path: url,
                    breadcrumbName: contentMap[url].text,
                    icon: contentMap[url].icon
                }
            );
        });

        const breadcrumbItems = [(
            {
                useRouter: false,
                path: '/home',
                breadcrumbName: ' 主页',
                icon: 'home'
            }
        ), (
            {
                useRouter: true,
                path: '/',
                breadcrumbName: currentModule.label,
                icon: currentModule.icon
            }
        )].concat(extraBreadcrumbItems);

        //console.log(this.props.currentModule);

        if (this.props.currentModule != null) {
            return (
                <div className="pageHeader">
                    <Breadcrumb className="breadcrumb" itemRender={this.breadcrumbItemRender} routes={breadcrumbItems} />
                    {/* <PageHeader 
                        title={<span> <UIIcon icon={this.props.currentModule.icon} /> {this.props.currentModule.label}</span>}  
                        breadcrumb={{itemRender:this.breadcrumbItemRender, routes:breadcrumbItems}} 
                        subTitle={this.props.currentModule.remarks} /> */}
                    
                </div>
            );
        }
        else {
            return <Fragment />
        }
    }
}

const PageHeaderWithRouter = withRouter(MainPageHeader);

export default class PageContent extends PureComponent {
    
    render() {
        const { contentMap, pageInstance } = this.props;

        const routeList = [];

        if (contentMap) {
            let index = 0;
            for (const key of Object.keys(contentMap)) {
                const routeItem = contentMap[key];
                const { getComponent } = routeItem;
                routeList.push(
                    <Route key={key + index++} exact path={key} render={(props) => (getComponent(pageInstance, props))} />
                );
            }
        }
        return (
            <LocaleProvider locale={zh_CN}>
                <MemoryRouter>
                    <div style={{ margin: '-24px -24px 0px' }}>
                        <PageHeaderWithRouter {...this.props} />
                        <div className="content">
                            <Switch>
                                {routeList}
                            </Switch>
                            {this.props.children}
                        </div>
                    </div>
                </MemoryRouter>
            </LocaleProvider>
        );
    }
}